<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm 
    :searchData="pagination"
    @handleSearch="handleSearch"
    @handleReset="handleReset"
    @handleClear="handleClear">
    </SearchForm>

    <TableList 
    :data = "data" 
    :pagination="pagination" 
    :total = "total" 
    :rowkey = "rowkey"
    @onChange = "onChange"
    @handleOpenAdd = "handleOpenAdd"
    @handleEdit = "handleEdit"
    @handleDel ="handleDel"
    @handleStart = "handleStart">
  </TableList>

   <DialogForm
    ref="dialogForm"
    :visible="formVisiable"
    :title="title"
    :data = "formBaseData"
    @handleClose ="handleClose"
    @handleAdd = "handleAdd"
    @handleEdit="handleEditForm"
   >
   </DialogForm>

   <Forbidden
   :visible = "forbiddenVisiable"
   :text="text"
   @handleClose = "handleClose"
   @handleSubmit = "handleForbidden">
   </Forbidden>
  </div>

  <OperateDialog
  :visible = "delVisiable"
  :text = "text"
  @handleDelete = "handleDelete"
  @handleClose = "handleClose">
  </OperateDialog>
</template>
  
<script setup lang="jsx">
import { ref,onMounted } from 'vue';
import TableList from '../project/components/TableList.vue'
import SearchForm from '../project/components/SearchForm.vue'
import DialogForm from '../project/components/DialogForm.vue'
import Forbidden from '@/components/Forbidden/index.vue'
import OperateDialog from '@/components/OperateDialog/index.vue'

import { getProjectList, projectAdd,getProjectDetails,projectUpdate,projectDelete,projectStatus} from '@/api/serve'
import { MessagePlugin } from 'tdesign-vue-next';

const data = ref([]);
const total = ref(0);
const delId = ref(0)
//声明为ref（）中间不能填任何数据 让其泛型为any 被ref引用的在使用时都需要.value
const forbiddenVal = ref()
const formVisiable = ref(false);
const forbiddenVisiable = ref(false)
const delVisiable = ref(false)
const text = ref('')
const dialogForm = ref ({})
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容

const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const result = await getProjectList(pagination.value)
  data.value = result.data.records
  total.value = Number(result.data.total)
}


// 翻页设置当前页
const onChange = (pageInfo) => {
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize =pageInfo.pageSize
  getList()
}

// -----------------搜索框功能---------------------
//重置搜索框
const handleReset = () => {
  //重置页码 没写name和status 则默认为空
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if(val === 'name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList()
}
// -----------------新增弹框功能---------------------
//打开新增弹框的方法
const handleOpenAdd = ()=>{
  title.value = '新增'
  formVisiable.value = true
}
//关闭弹窗的方法
const handleClose =()=>{
  title.value = ''
  formVisiable.value = false
  forbiddenVisiable.value = false
  delVisiable.value =false
}
//新增护理项目
const handleAdd = async (val) => { 
  const result = await projectAdd(val)
  if(result.code == 200){
    //成功
    MessagePlugin.success('新增护理项目成功')
    //查询最新数据
    getList()
    //关闭弹框
    formVisiable.value = false;
    //清空回显数据 这个是反过来调用实例 在代码块最后
    dialogForm.value.handleClear()
  }else{
    //失败
    MessagePlugin.error(result.msg)
  }
}

// -----------------编辑弹框功能---------------------
  //点击编辑，回显数据功能
  const handleEdit = (val) =>{
    // 将弹窗的标题
    title.value = '编辑'
    // 获取详情
    getDetails(val.id)
    // 显示弹窗
    formVisiable.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  debugger
  const res = await getProjectDetails(id) // 获取列表数据
    if (res.code === 200) {
      formBaseData.value = res.data
    }
  }

  // 回显后修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
// -----------------禁用启用弹框功能---------------------
//点击禁用按钮 打开Forbidden弹窗
const handleStart = (val) =>{
    debugger
    forbiddenVal.value =val
    text.value = val.name
    forbiddenVisiable.value = true
}

//处理提交修改禁用或者启用状态
const handleForbidden = async ()=>{
  debugger
  forbiddenVal.value.status = forbiddenVal.value.status ? 0 :1
  console.log(forbiddenVal.value)
   const res = await projectStatus(forbiddenVal.value)
   if(res.code == 200){
    MessagePlugin.success('禁用成功')
    getList()
    handleClose()
   }

}

// -----------------删除弹框功能---------------------
//点击删除按钮 打开删除弹框
const handleDel = (val)=>{
    
    text.value = val.name
    delId.value = val.id
    delVisiable.value = true
}

//发送ajax请求根据Id删除
const handleDelete = async ()=>{
    const res = await projectDelete(delId.value)
    if(res.code =200){
      MessagePlugin.success('删除成功')
      getList()
      handleClose()
    }else{
      MessagePlugin.error(res.msg)
    }
}
</script>